<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
</head>
<body>
    <button id="btn">按钮</button>
  <script>
    //创建实例
    const myAxios = axios.create({
        baseURL:"http://gmall-h5-api.atguigu.cn/",
        timeout:9999,
    });
    /* 
      请求拦截器的失败函数进入条件
      1.条件1
        -首先设置请求拦截器use方法的第三个参数option对象的synchronous属性为true（打开同步）
        -当请求拦截器的成功回调中，如果出现了异常信息被抛出，则直接进入失败的回调函数中
      2.条件2
        -假设有两个请求拦截器，分别是拦截器1和拦截器2，拦截器1先执行，拦截器2后执行
        -如果拦截器1中的成功函数返回了失败的promise实例，则拦截器2的失败的回调函数会执行
        -总结：2的失败回调就是为了处理1的成功回调中抛出失败
        */
    myAxios.interceptors.request.use(
      (config)=>{
        console.log("第一个请求拦截器成功函数的config打印",config);
        return config;
      },
      (error)=>{
        console.log("第一个请求拦截器失败函数的error打印",error);
      return Promise.reject("第一个请求拦截器错误")
      },
      {
        synchronous:false,
      }
    );

    myAxios.interceptors.request.use(
      (config)=>{
        // throw new Error("请求拦截器成功函数报错!!!!")
        console.log("第二个请求拦截器成功函数的config打印",config);
        return Promise.reject("第一个拦截器成功函数返回失败的promise实例")
        return config;
      },
      (error)=>{
        console.log("第二个请求拦截器失败函数的error打印",error);
        return Promise.reject("第二个请求拦截器错误");
      },
      {
        synchronous:false,
      }
    )
    /* 
    响应拦截器失败函数进入条件：
    -请求已经发送到服务器，但是在服务器没有得到预想的结果
    -比如：超时服务器宕机（5xx）找不到数据（4xx等等）
    */
   myAxios.interceptors.request.use(
    (response)=>{
      console.log("第一个响应拦截器成功函数的response打印",response);
      return response;
    },
    (error)=>{
      console.log("第一个响应拦截器失败函数的error打印",error);
      return Promise.reject("第一个响应拦截器错误");
    }
   );

   const oBtn =document.getElementById("btn");

   oBtn.onclick =async function(){
    try{
      const result = await myAxios.get("/api/product/getBaseCategoryList");
      console.log(result,"result");
    }catch(e){
      console.log("在异常处理中的错误信息打印",e);
    }
   };
  </script>
</body>
</html>